<template>
  <Layout
    ><template #default>
      <div class="dayday-wrapper">
        <canvas id="canvas"></canvas>
        <div class="hero">
          <h1>DayDay</h1>
          <h2>Study</h2>
          <a
            target="_blank"
            href="https://www.framer.com/marketplace/components/tubes-cursor/"
            >WJN</a
          >
        </div>
      </div>
    </template></Layout
  >
</template>
<script setup>
import Layout from 'vuepress-theme-hope/client/layouts/Layout.js';
import { onMounted, onBeforeUnmount } from 'vue';

let app = null;

onMounted(async () => {
  // 动态导入 threejs-components，防止 SSR 报错
  const { default: TubesCursor } = await import(
    'https://cdn.jsdelivr.net/npm/threejs-components@0.0.19/build/cursors/tubes1.min.js'
  );

  const canvas = document.getElementById('canvas');
  app = TubesCursor(canvas, {
    tubes: {
      colors: ['#f967fb', '#53bc28', '#6958d5'],
      lights: {
        intensity: 200,
        colors: ['#83f36e', '#fe8a2e', '#ff008a', '#60aed5'],
      },
    },
  });

  // 点击切换颜色
  const handleClick = () => {
    const colors = randomColors(3);
    const lightsColors = randomColors(4);
    app.tubes.setColors(colors);
    app.tubes.setLightsColors(lightsColors);
  };

  document.body.addEventListener('click', handleClick);

  onBeforeUnmount(() => {
    document.body.removeEventListener('click', handleClick);
    app?.dispose?.();
  });
});

// 生成随机颜色
function randomColors(count) {
  return new Array(count).fill(0).map(
    () =>
      '#' +
      Math.floor(Math.random() * 16777215)
        .toString(16)
        .padStart(6, '0')
  );
}
</script>

<style scoped>
body,
html,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
}
.dayday-wrapper {
  position: relative;
  width: 100%;
  height: 100vh; /* 保证占满屏幕 */
  overflow: hidden;
  font-family: 'Montserrat', serif;
}
body {
  touch-action: none;
}

#app {
  height: 100%;
  font-family: 'Montserrat', serif;
}

#app a {
  text-decoration: none;
  color: #fff;
}

.hero {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

h1,
h2,
p {
  margin: 0;
  padding: 0;
  color: white;
  text-shadow: 0 0 20px rgba(0, 0, 0, 1);
  line-height: 100%;
  user-select: none;
}

h1 {
  font-size: 80px;
  font-weight: 700;
  text-transform: uppercase;
}

h2 {
  font-size: 60px;
  font-weight: 500;
  text-transform: uppercase;
}

#canvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

</style>
